<script setup lang="ts">
import {UserInfor} from '@/api/login'
import dDialog from '@/components/dDialog/dDialog.vue'
import {PropType} from 'vue'
defineProps({
  //显示
  showPersonalDialog: {
    type: Boolean,
    required: true
  },
  // 个人信息
  userInfor: {
    type: Object as PropType<UserInfor | null>,
    required: true,
    default: () => null
  }
})
const emits = defineEmits(['close'])
const onClose = () => {
  emits('close')
}
</script>

<template>
  <d-dialog
    title="个人信息"
    :show-dialog="showPersonalDialog"
    :hide-save-btn="true"
    cancel-text="关闭"
    :width="600"
    custom-class="personal-dialog"
    @cancel="onClose"
    @close="onClose"
  >
    <el-descriptions :column="1" direction="horizontal">
      <el-descriptions-item label="用户姓名：">
        {{ userInfor?.userName }}
      </el-descriptions-item>
      <el-descriptions-item label="登录账号：">
        {{ userInfor?.loginName }}
      </el-descriptions-item>
      <el-descriptions-item label="联系电话：">
        {{ userInfor?.phone }}
      </el-descriptions-item>
      <el-descriptions-item label="所属角色：">
        {{ userInfor?.roleName }}
      </el-descriptions-item>
      <el-descriptions-item label="岗位：">
        {{ userInfor?.jobName }}
      </el-descriptions-item>
    </el-descriptions>
  </d-dialog>
</template>

<style lang="less" scoped>
:deep(.el-descriptions__cell) {
  display: flex;
  justify-content: center;
  .el-descriptions__label {
    flex: 1;
    text-align: right;
    margin-right: 5px;
  }
  .el-descriptions__content {
    flex: 1.5;
    text-align: left;
  }
}
</style>
<style lang="less">
.personal-dialog {
  .el-dialog__body {
    padding: 50px 0;
  }
}
</style>
